<template>
	<div class="flex-start-main">
		<div
			v-for="(item, index) in optionList"
			:key="item.id"
			class="flex-start-center borderLine"
		>
			<div style="width: 50px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ index + 1 }}、{{ item.lastUpdateTime || '' }}</div>
			<div style="width: 180px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ item.startDateTime || '' }}</div>
			<div style="width: 180px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ item.endDateTime || '' }}</div>
			<div style="width: 90px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">
				<jk-state-bar :state-list="recordTypeList" :state="item.recordType"></jk-state-bar>
			</div>
			<div style="width: 80px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ item.ration || '' }}</div>
			<div style="width: 150px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ item.productCode || '' }}</div>
			<!--<div
				style="width: 150px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;"
				:style="{
					color: isNeedBindProduct(item) ? '#fff' : item.prdNoticeMachineChangeId && searchParams.processCode === 'LT' ? '#2d8cf0' : '',
					cursor: isNeedBindProduct(item) ? 'pointer' : item.prdNoticeMachineChangeId && searchParams.processCode === 'LT' ? 'pointer' : '',
					background: isNeedBindProduct(item) ? '#F95457' : ''
				}"
				@click="onEditProductItem(item)"
			>
				&lt;!&ndash;翻改任务ID为null时提示，注：为0表示弱捻（RN）也不提示&ndash;&gt;
				<span v-if="item.prdNoticeMachineChangeId === null" class="el-icon-warning-outline warning-product"></span>
				<span>{{ item.productName || '' }}</span>
			</div>-->
			<div style="width: 150px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ row.unit.toLowerCase() === 'kg' ? item.startOutputKg : item.startOutputM }} {{ row.unit }}</div>
			<div style="width: 150px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ row.unit.toLowerCase() === 'kg' ? item.endOutputKg : item.endOutputM }} {{ row.unit }}</div>
			<div style="width: 150px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ row.unit.toLowerCase() === 'kg' ? item.outputKg : item.outputM }} {{ row.unit }}</div>
			<div style="width: 90px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ item.runningTime || 0 }}</div>
			<div style="width: 90px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ item.shutdownTime || 0 }}</div>
			<!--<div style="width: 200px;padding: 0 8px;box-sizing: border-box;white-space: nowrap;flex-shrink: 0;">{{ `${item.updaterName || '' } ${item.updateTime || '' }` }}</div>-->
		</div>
	</div>
</template>
<script>
    import { recordTypeList } from '../../../../utils/jk/status-option-list';

    export default {
        props: {
            row: {
                type: Object,
                default() {
                    return {};
                }
            },
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                recordTypeList: recordTypeList
            };
        },
        methods: {
            // 是否需要绑定品种(络筒 + 非弱捻(RN)才需要绑定品种)
            isNeedBindProduct(item) {
                return this.searchParams.processCode === 'LT' && item.prdNoticeMachineChangeId === null;
            },
            onEditProductItem(item) {
                if (this.searchParams.processCode === 'LT' && item.prdNoticeMachineChangeId !== 0) {
                    this.$emit('on-edit-product-item', item);
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.warning-product {
    color: #fff;
    font-size: 13px;
}
</style>
